// 导入gulp模块
const { src, dest, series, parallel, watch } = require('gulp')

// 导入gulp插件
const htmlmin = require('gulp-htmlmin') // 压缩html
const babel = require('gulp-babel')
const uglify = require('gulp-uglify') // 压缩js
const cleanCSS = require('gulp-clean-css')
const sass = require('gulp-sass')
const rename = require('gulp-rename')
const del = require('del')
const connect = require('gulp-connect')
const { createProxyMiddleware } = require('http-proxy-middleware')

// 配置文件路径
const path = {
  html: {
    src: 'src/**/*.html',
    dest: 'dist'
  },
  js: {
    src: 'src/js/**/*.js',
    dest: 'dist/js'
  },
  css: {
    src: 'src/css/**/*.scss',
    dest: 'dist/css'
  },
  img: {
    src: 'src/images/**/*',
    dest: 'dist/images'
  },
  libs: {
    src: 'src/libs/**/*',
    dest: 'dist/libs'
  }
}

// 删除dist文件夹
const delDist = () => del(['dist'])

// 移动媒体资源和三方库文件
const imgTask = () => src(path.img.src).pipe(dest(path.img.dest))
const libsTask = () => src(path.libs.src).pipe(dest(path.libs.dest))

// 制定压缩html任务
const htmlTask = () => src(path.html.src)
  .pipe(htmlmin({
    removeComments: true,//清除HTML注释
    collapseWhitespace: true,//压缩HTML
    collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input checked />
    removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
    removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
    removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
    minifyJS: true,//压缩页面JS
    minifyCSS: true//压缩页面CSS
  }))
  .pipe(dest(path.html.dest))
  .pipe(connect.reload()) // 文件修改刷新浏览器

// 制定压缩js任务
const jsTask = () => src(path.js.src)
  .pipe(babel({ presets: ['@babel/env'] })) // 使用babel转换ES6语法
  .pipe(dest(path.js.dest)) // 输出转换后的js文件
  .pipe(uglify())  // 压缩js
  .pipe(rename({ extname: '.min.js' })) // 将压缩文件加上相应后缀
  .pipe(dest(path.js.dest)) // 输出压缩文件
  .pipe(connect.reload()) // 文件修改刷新浏览器

// 制定压缩css任务
const cssTask = () => src(path.css.src)
  .pipe(sass()) // b编译scss文件
  .pipe(dest(path.css.dest)) // 输出编译后的文件
  .pipe(cleanCSS()) // 清理压缩css
  .pipe(rename({ extname: '.min.css' })) // 将压缩文件加上相应后缀
  .pipe(dest(path.css.dest)) // 输出压缩文件
  .pipe(connect.reload()) // 文件修改刷新浏览器

// 文件监控
const watchTask = () => {
  watch(path.html.src, htmlTask)
  watch(path.css.src, cssTask)
  watch(path.js.src, jsTask)

}

// 网站服务器
const serverTask = () => connect.server({
  root: 'dist',
  livereload: true,
  port: 5555,
  middleware: () => [createProxyMiddleware('/api', {
    target: 'http://localhost:3000',
    changeOrigin: true
  })]

})

module.exports.default = series(delDist,
  parallel(htmlTask, jsTask, cssTask, imgTask, libsTask, watchTask, serverTask)
  // parallel(watchTask)
)

